<template>
  <div class="news">
    <header>
      <li @click="goback()">
        <van-icon name="arrow-left" />
      </li>
      <li>消息</li>
      <li>
        <van-icon name="more-o" />
      </li>
    </header>
    <main>
      <div class="cell">
        <van-swipe-cell v-for="(item,index) in list" :key="index">
          <van-card
            :num="item.price"
            price="2.00"
            :desc="item.title"
            :title="item.word"
            class="goods-card"
            :thumb="item.imgs"
          />
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="del(item.id)"/>
          </template>
        </van-swipe-cell>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../../utils/request";
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios({
        url: "/api/lists",
        method: "post"
      }).then(res => {
        this.list = res.data.data;
      });
    },
    del(id){
      axios({
        url:"api/delet",
        method:"delete",
        data:{id:id}
      }).then(res=>{
        this.getList()
      })
    },
    goback(){
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.news {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px;
  font-size: 20px;
  color: #ffffff;
  background: cornflowerblue;
}
main {
  flex: 1;
  overflow-y: auto;
}
.goods-card {
  margin: 0;
  /* background-color: @white; */
}

.delete-button {
  height: 100%;
}
</style>